<template>
    <div class="box">
        <div class="tl fx">
            <div class="icon">
                <Nimg src="012.png" width="40" height="56" />
            </div>
            {{ yuyueType === "geren" ? "个人预约" : "团队预约" }}
        </div>
        <div class="con">
            <div class="bt fx">
                <div class="wb">选择入馆日期</div>
                <div class="fx1"></div>
            </div>
            <div class="weekLine fx">
                <div class="item fx jcc">一</div>
                <div class="item fx jcc">二</div>
                <div class="item fx jcc">三</div>
                <div class="item fx jcc">四</div>
                <div class="item fx jcc">五</div>
                <div class="item fx jcc">六</div>
                <div class="item fx jcc">日</div>
            </div>
            <div class="days fx fww">
                <div
                    class="item"
                    :class="{
                        on: i.join('-') === checkedDayArr.join('-'),
                        isBeforeToday: isBeforeToday(i),
                        isBiguan: isBiguan(i),
                    }"
                    v-for="(i, index) in days"
                    :key="index"
                    @click="checkDay(i)"
                >
                    <div class="num fx jcc">{{ i[1] }}-{{ i[2] }}</div>
                    <div class="status fx jcc" v-if="isBiguan(i)">闭馆</div>
                    <div class="status fx jcc" v-else>预约</div>
                </div>
            </div>
            <div class="time">
                <div class="bt fx">
                    <div class="wb">选择参观时段</div>
                    <div class="fx1"></div>
                </div>
                <div class="group fx">
                    <div
                        class="item fx"
                        :class="{
                            on: i.txt === checkedTime,
                            isReserved: checkIsReserved(i),
                        }"
                        v-for="(i, index) in timeArr"
                        :key="index"
                        @click="checkTime(i)"
                    >
                        <div class="fx1">
                            <div class="num fx jcc">{{ i.txt }}</div>
                            <div class="status fx jcc">预约</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bigBtn fx jcc" @click="next">下一步</div>
        </div>
    </div>
</template>
<script>
const moment = require("moment");
import $ from "@/common";
export default {
    props: {
        yuyueType: {
            type: String,
            default: "geren",
        },
    },
    data() {
        return {
            days: [],
            timeArr: [
                {
                    txt: "09:00-11:00",
                },
                {
                    txt: "11:00-13:00",
                },
                {
                    txt: "13:00-15:00",
                },
                {
                    txt: "15:00-17:00",
                },
            ],
            checkedDayArr: [],
            checkedTime: "",
            reservedArr: [],
            interval_initTimeSlot_id: 0,
        };
    },
    methods: {
        initDays() {
            let days = [];
            for (let i = 1; i < 15; i++) {
                let day = moment()
                    .startOf("week")
                    .add(i, "days")
                    .format("YYYY-MM-DD");
                day = day.split("-");
                days.push(day);
            }
            this.days = days;
        },
        initTimeSlot() {
            let url = $.index("aList");
            $.post(url).then((res) => {
                if (res.isError) {
                    return;
                }

                this.reservedArr = $.change(res);
            });
        },
        checkDay(i) {
            $.log("111");
            $.log(i);
            $.log(this.isBeforeToday(i));
            if (this.isBeforeToday(i)) {
                return;
            }
            if (this.isBiguan(i)) {
                return;
            }
            this.checkedDayArr = i;
            this.checkedTime = "";
        },
        isBeforeToday(i) {
            let today = moment().add(1, "days").format("YYYY-MM-DD");
            let day = i.join("-");
            return moment(day).isBefore(today);
        },
        isBiguan(i) {
            let day = i.join("-");
            let xingqiji = moment(day).day();
            $.log(xingqiji);
            $.log(day);
            let res = xingqiji === 1;

            if (this.yuyueType === "geren") {
                if (day === "2023-01-20") {
                    res = true;
                }

                if (day === "2023-01-23") {
                    res = false;
                }

                if (day === "2023-01-30") {
                    res = true;
                }
            } else {
                if (
                    day === "2023-01-20" ||
                    day === "2023-01-21" ||
                    day === "2023-01-22" ||
                    day === "2023-01-23" ||
                    day === "2023-01-24"
                ) {
                    res = true;
                }
                if (day === "2023-01-30") {
                    res = true;
                }
            }

            return res;
        },
        checkIsReserved(i) {
            let checkedDay = this.checkedDayArr.join("-");
            let filterArr = this.reservedArr.filter((ele) => {
                return (
                    ele.appoint_date === checkedDay &&
                    ele.appoint_time === i.txt
                );
            });
            return filterArr.length > 0;
        },
        checkTime(i) {
            if (this.checkIsReserved(i)) {
                $.log("已被预约");
                return;
            }
            this.checkedTime = i.txt;
        },
        next() {
            if (this.checkedDayArr.length === 0) {
                $.tip("请选择入馆日期");
                return;
            }
            if (this.checkedTime === "") {
                $.tip("请选择参观时段");
                return;
            }
            $._checkedDay = this.checkedDayArr.join("-");
            $._checkedTime = this.checkedTime;
            this.$emit("next");
        },
    },
    mounted() {
        this.initDays();
        this.initTimeSlot();
        clearInterval(this.interval_initTimeSlot_id);
        this.interval_initTimeSlot_id = setInterval(() => {
            this.initTimeSlot();
        }, 5000);
        $.interval_initTimeSlot_id = this.interval_initTimeSlot_id
    },
};
</script>
<style lang="less" scoped>
.box {
    width: 640rpx;
    background: #ffffff;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    opacity: 1;
    padding: 50rpx;
    line-height: 1;
    .tl {
        .icon {
            margin-right: 12rpx;
        }
        font-size: 40rpx;
    }
    .con {
        padding-top: 56rpx;
        .bt {
            font-size: 28rpx;
            font-weight: bold;
            border-bottom: 2rpx solid #f2f2f2;
            padding-bottom: 28rpx;
        }
        .weekLine {
            font-size: 28rpx;
            color: #000;
            color: rgba(0, 0, 0, 0.4);
            .item {
                width: 76rpx;
                padding-top: 20rpx;
                padding-bottom: 20rpx;
            }
        }
        .days {
            .item {
                width: 76rpx;
                height: 92rpx;
                .num {
                    height: 50rpx;
                    font-size: 20rpx;
                    color: #000;
                }
                .status {
                    color: #0073e6;
                }
                &.on {
                    background: #0073e6;
                    .num {
                        color: #fff;
                    }
                    .status {
                        color: #fff;
                    }
                }

                &.isBeforeToday {
                    opacity: 0.2;
                }
                &.isBiguan {
                    opacity: 0.2;
                }
            }
        }
        .time {
            margin-top: 60rpx;
            .group {
                margin-left: -20rpx;
                .item {
                    width: 260rpx;
                    height: 92rpx;
                    background: #fff;
                    border-radius: 0rpx 0rpx 0rpx 0rpx;
                    opacity: 1;
                    border: 2rpx solid #f4f4f5;
                    margin-top: 18rpx;
                    margin-left: 20rpx;
                    .num {
                        color: #000000;
                        font-size: 24rpx;
                    }
                    .status {
                        color: #0073e6;
                        padding-top: 10rpx;
                    }
                    &.on {
                        background: #0073e6;
                        .num {
                            color: #fff;
                        }
                        .status {
                            color: #fff;
                        }
                    }
                    &.isReserved {
                        background: #e5e5e5;
                        .num {
                            color: #fff;
                        }
                        .status {
                            color: #fff;
                        }
                    }
                }
            }
        }
        .bigBtn {
            color: #fff;
            width: 520rpx;
            height: 80rpx;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            margin: 0 auto;
            margin-top: 60rpx;
        }
    }
}
</style>